<template>
  <div>
    <el-form
      :model="form"
      ref="form"
      label-width="80px"
      :inline="false"
      size="normal"
    >
      <!-- spu名称 输入框-->
      <el-form-item label="SPU名称"> 名字和描述 </el-form-item>
      <!-- sky名称 输入框-->
      <el-form-item label="SKU名称" size="normal">
        <el-input
          v-model="skudatalist.skuName"
          placeholder="SKU名称"
          size="normal"
          clearable
        >
        </el-input>
      </el-form-item>
      <!-- 价格 输入框-->
      <el-form-item label="价格(¥)" size="normal">
        <el-input
          v-model="skudatalist.price"
          placeholder="SKU名称"
          size="normal"
          clearable
          type="number"
        >
        </el-input>
      </el-form-item>
      <!-- 重量(kg) 输入框-->
      <el-form-item label="重量(kg)" size="normal">
        <el-input
          v-model="skudatalist.weight"
          placeholder="重量kg"
          size="normal"
          clearable
        >
        </el-input>
      </el-form-item>
      <!-- 规格描述 textarea-->
      <el-form-item label="规格描述" size="normal">
        <el-input
          v-model="skudatalist.skuDesc"
          placeholder="描述信息"
          size="normal"
          clearable
          type="textarea"
        ></el-input>
      </el-form-item>
      <!-- 选择框:平台属性 -->
      <el-form-item label="平台属性" size="normal">
        <el-form label-width="80px" :inline="true" size="normal">
          <el-form-item
            :label="item.attrName"
            v-for="(item, index) in attrInfoList"
            :key="item.id"
            :value="item.id"
          >
            <el-select
              placeholder="请选择"
              clearable
              filterable
              v-model="item.attridAndInfoList"
            >
              <el-option
                v-for="(it, ind) in item.attrValueList"
                :key="it.id"
                :label="it.valueName"
                :value="`${item.id}:${it.id}`"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <!-- 选择框:选择销售属性 :颜色-->
      <el-form-item label="销售属性" size="normal">
        <el-form label-width="80px" :inline="true" size="normal">
          <el-form-item
            :label="item.saleAttrName"
            v-for="(item, index) in spuSaleAttrList"
            :key="item.id"
            :value="item.id"
          >
            <el-select
              placeholder="请选择"
              clearable
              filterable
              v-model="item.attrIdAndValueId"
            >
              <el-option
                v-for="(it, ind) in item.spuSaleAttrValueList"
                :key="it.id"
                :label="it.saleAttrValueName"
                :value="`${item.id}:${it.id}`"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <!-- table图片列表-选择框,图片,名称,操作 -->
      <el-table border stripe :data="spuImaheList"
      @selection-change="handleSelectionChange">
        <el-table-column type="selection" 
        
        :width="80"> </el-table-column>
        <el-table-column prop="prop" label="图片" width="width">
          <template slot-scope="{ row, $index }">
            <div>
              <img
                :src="row.imgUrl"
                alt=""
                style="width: 100px; height: 100px"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="imgName" label="名称" width="width">
        </el-table-column>
        <el-table-column prop="" label="操作" width="width">
          <template slot-scope="{ row, $index }">
            <div>
              <el-button type="primary" size="mini" v-if="!row.isDefault" @click="changeDefault(row)">设置默认</el-button>
            <el-button type="success" size="mini" v-else>默认</el-button>
            
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- //末尾:保存与取消按钮 -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="cancledata">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {},
      o_obj: {},
      spuId: "",
      spuImaheList: [], //图片列表
      imagelist:[],//用户选择图片的数组
      spuSaleAttrList: [],
      attrInfoList: [],
      skudatalist: {
        //1.父组件传递的数据
        category3Id: 0, //row中收集
        spuId: 0, //row收集
        tmId: 0, //row收集
        //2.双向数据绑定的内容:
        price: 0, //
        skuName: "", //名称
        weight: "", //重量
        skuDesc: "", //描述
        //在attrInfoList数据整理
        skuAttrValueList: [],
        skuDefaultImg: "", //默认图片
        skuImageList: [],//图片的收集
        //在spuSaleAttrList中进行进一步整理数据
        skuSaleAttrValueList: [],
      },
    };
  },
  methods: {
    //取消按钮
    cancledata(){
        this.$emit("canclesku",0);
        Object.assign(this._data,this.$options.data());
    },
    //保存按钮
    async onSubmit() {
        //整理skuAttrValueList的参数
        let arr = [];
        this.attrInfoList.forEach(item=>{
            if(item.attridAndInfoList){
                const [attrId,valueId] =item.attridAndInfoList.split(":")
                let obj = {valueId,attrId};
                arr.push(obj)
            }
        })
        this.skudatalist.skuAttrValueList = arr;
        //整理skuSaleAttrValueList的参数:
        this.skudatalist.skuSaleAttrValueList= this.spuSaleAttrList.reduce((prev,item)=>{
            if(item.attrIdAndValueId){
                const [saleAttrId,saleAttrValueId] =item.attrIdAndValueId.split(":");
                prev.push({saleAttrId,saleAttrValueId})
            }
            return prev;
        },[]);
        this.skudatalist.skuImageList= this.imagelist.map(item=>{
            return{
               imgName: item.imgName,
               imgUrl: item.imgUrl,
               isDefault: item.isDefault,
               spuImgId: item.id,
            }
        })
        let result =await this.$API.sku.saveSkuInfo(this.skudatalist)
        if(result.code === 200 ){
            this.$message({type:"success",message:"成功"})
            this.$emit("canclesku",0)
        }
        Object.assign(this._data,this.$options.data());
    },
    //获取图片列表:
    async getphotolist() {
      let result = await this.$API.sku.reqspuimg(this.spuId);
      if (result.code === 200) {
        let dataa = result.data;
        dataa.forEach(element => {
            element.isDefault = 0;
        });
        this.spuImaheList = dataa;
      }
    },
    //获取销售属性:
    async getspusaleattrlist() {
      let result = await this.$API.sku.reqspusaleattrlist(this.spuId);

      if (result.code === 200) {
        this.spuSaleAttrList = result.data;
      }
      console.log(this.spuSaleAttrList);
    },
    //获取平台属性
    async getarreinforlist() {
      let result = await this.$API.sku.reqarreinforlist(this.o_obj);
      if (result.code === 200) {
        this.attrInfoList = result.data;
      }
    },
    //父组件调用子组件函数,获取数据:
    getskudata(row, oobj) {
      this.spuId = row.id;
      this.skudatalist.category3Id=row.category3Id;
      this.skudatalist.spuId=this.spuId;
      this.skudatalist.tmId=row.tmId;

      //获取三个id 包括一级id,二级id,三级id
      this.o_obj = oobj;
      this.getphotolist();
      this.getspusaleattrlist();
      this.getarreinforlist();
    },
    //用户勾选后的回调---整合的row 缺default
    handleSelectionChange(params) {
        this.imagelist = params
    },
    //点击设置默认
    changeDefault(row){
        
        this.spuImaheList.forEach(item=>{
            item.isDefault = 0
        })
        row.isDefault = 1;
        this.skudatalist.skuDefaultImg=row.imgUrl;//默认图片
    }
  },
};
</script>

<style></style>
